<script setup>
import Category from "./components/Category.vue";
import image from "./assets/image.jpg";
import video from "./assets/video.mov";
</script>

<template>
  <div>
    <div class="container">
      <Category title="美食" :listData="foods">
        <img :src="image" alt="美食" />
      </Category>
      <Category title="游戏" :listData="games" />
      <Category title="电影" :listData="films">
        <video :src="video" controls></video>
      </Category>
    </div>
    <div class="footer">
      <div>
        图片来自：<a href="https://unsplash.com" target="_blank">unsplash</a>
      </div>
      <div>
        视频来自：<a href="https://www.videezy.com" target="_blank">videezy</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      foods: ["火锅", "烧烤", "小龙虾", "牛排"],
      games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
      films: ["《教父》", "《拆弹专家》", "《你好，李焕英》", "《九品芝麻官》"],
    };
  },
};
</script>

<style scoped>
.container,
.footer {
  display: flex;
  justify-content: center;
  gap: 1rem;
  align-items: start;
}

.footer {
  position: fixed;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
}
</style>
